/**
    @for $i from x to y        --->[x,y);
    @for $i from x through y   --->[x,y] 
*/
@keyframes loading {
    0% {
        opacity: 0.3;
        transform: translateY(0px);
    }
    50% {
        opacity: 1;
        transform: translateY(-20px);
    }
    100% {
        opacity: 0.3;
        transform: translateY(0px);
    }
}

#loading {
    position: fixed;
    top: 200px;
    left: 46%;
    span {
        position: absolute;
        width: 20px;
        height: 20px;
        background-color: #3498db;
        opacity: 0.5;
        border-radius: 50%;
        animation: loading 1s infinite ease-in-out;
        @for $i from 1 to 6 {
            &:nth-child(#{$i}) {
                left: ($i - 1) * 24px;
                animation-delay: 0.2 * ($i - 1)+s;
            }
        }
    }
}